<template>
    <div style="display: flex;">
        <div style="width:200px">
            <div>选中的行：{{ selectName }}</div>
            <div>多选的行：{{ checkedName }}</div>
        </div>
        <split-pane ref="splitpane1" :triggerSize="3" orientation="Vertical"
        style="width: 100%;height:400px;overflow: hidden;">
            <pane-item :collapsed="true" min="100px" :span="1" style="height:300px;width: 100%;">
                <JList
                style="width: calc( 100% - 200px);height: 100%;" 
                :data="datalist" 
                :showCheckBox="true" 
                :showIndex="true" 
                :columns="columns"
                @selectChanged="selectChange"
                @checkChanged="checkChange"
                ></JList>                
            </pane-item>
            <pane-item :collapsed="false" :span="2" min="50px" style="width: 100%;"><div style="width: 100%;height: 100%;background-color:#915c4c">第二个item中的内容<span>最小高度50px</span></div></pane-item>
        </split-pane>
    </div>
</template>

<script>
import JList from './JVMList.vue'
import SplitPane from '../SplitPane/SplitPane.vue';
import PaneItem from '../SplitPane/PaneItem.vue';
export default {
    data(){
        return {
            datalist:[],
            columns:[{
                title: "姓名",
                key: "name",
                width: "100px"
            },
            {
                title: "年龄",
                key: "age",
                width: "30%",
                editable:true
            },
            {
                title: "性别",
                key: "sex",
                type: 'select',
                width: "50px",
                options:[
                    {
                        label:"男",
                        value:"男"
                    },
                    {
                        label:"女",
                        value:"女"
                    }
                ],
                editable:true
            },
            {
                title: "职务",
                key: "position",
            },
            ],            
            selectName:"",
            checkedName:""
        }
    },
    components:{
        JList,
        SplitPane,PaneItem
    },
    mounted(){
        this.getData();
    },
    methods:{
        getData(){
            this.datalist.push({
                name:"王二蛋",
                age:21,
                sex:"男"
            });
            this.datalist.push({
                name:"赵  四",
                age:28,
                sex:"男"
            });
            this.datalist.push({
                name:"张小花",
                age: 19,
                sex:"女"
            });
            this.datalist.push({
                name:"闫九僧",
                age:43,
                sex:"男"
            });
            this.datalist.push({
                name:"闫十僧",
                age:41,
                sex:"男"
            });
            this.datalist.push({
                name:"闫廿僧",
                age:41,
                sex:"男",
                position: "扫地僧"
            });
        },
        selectChange(selectedItems){
            let names="";
            selectedItems.forEach(element => {
                names += element.name;
            });
            this.selectName = names;
        },
        checkChange(checkedItems){
            let names="";
            checkedItems.forEach(element => {
                names += element.name;
            });
            this.checkedName = names;
        }
    }

}
</script>

<style>

</style>